import React from "react"
import { StyleSheet, Text, View, Image, Dimensions, ImageBackground, TouchableHighlight } from 'react-native';
import LinearGradinet from 'react-native-linear-gradient';

// 设备宽度，单位 dp
const deviceWidthDp = Dimensions.get('window').width;
// 设计稿宽度（这里为640px），单位 px
const uiWidthPx = 375;
const pTd = (uiElePx) => {
    return uiElePx * deviceWidthDp / uiWidthPx;
}

const CreatePrompt = ({ navigation }) => {

    const next = () => {
        navigation.navigate("create-generate")
    }

    return (
        <View style={styles.container}>
            <LinearGradinet
                start={{ x: 0, y: 0 }}
                end={{ x: 0, y: 1 }}
                colors={['#5662EA', '#0A134B']}
                style={{ width: "100%", height: "100%", position: "relative", }}
            >
                <View ><Text style={styles.title}>Backup Mnemonics</Text></View>
                <View style={{ justifyContent: "center", width: "100%", flexDirection: "row" }}>
                    <Image source={require("@/assets/imgs/index_logo.png")} style={{ height: pTd(115), width: pTd(115), marginTop: pTd(10) }}></Image>
                </View>
                <View style={styles.bottom}>
                    <ImageBackground style={styles.bottom_bgc} source={require("@/assets/imgs/s.png")}>
                        <View style={styles.bottom_one}>
                            <Text style={{ ...styles.bottom_text_title }}>What are mnemonics</Text>
                            <Text style={{ ...styles.bottom_text_text, marginTop: pTd(5) }}>
                                When a new wallet is created, a set of 12 word mnemonic words will be randomly generated
                            </Text>
                            <Text style={styles.bottom_text_text}>
                                Mnemonics are the only way to control assets
                            </Text>
                            <Text style={styles.bottom_text_text}>
                                Once mnemonics are lost, assets cannot be recovered
                            </Text>
                        </View>
                        <View style={styles.bottom_two}>
                            <Text style={{ ...styles.bottom_text_title }}>Back up mnemonics correctly</Text>
                            <Text style={{ ...styles.bottom_text_text, marginTop: pTd(10) }}>
                                Use banknotes to copy mnemonics correctly
                            </Text>
                            <Text style={styles.bottom_text_text}>
                                When the mobile phone is lost or damaged, you can use mnemonics to restore the assets
                            </Text>
                        </View>
                        <View style={styles.bottom_three}>
                            <Text style={{ ...styles.bottom_text_title, marginTop: pTd(4) }}>Keep mnemonics in secret</Text>
                            <Text style={{ ...styles.bottom_text_text, marginTop: pTd(10) }}>
                                Do not store or transmit mnemonics in Internet devices
                            </Text>
                            <Text style={styles.bottom_text_text}>
                                Don't save it in mobile photo album, email, online disk and social software
                            </Text>
                            <Text style={styles.bottom_text_text}>
                                Don't reveal your mnemonics to anyone
                            </Text>
                            <View>
                                <TouchableHighlight style={styles.button} underlayColor='#ddd' onPress={next}>
                                    <Text style={{ fontSize: pTd(16), color: "#fff", textAlign: "center", lineHeight: pTd(44) }}>Confirm</Text>
                                </TouchableHighlight >
                            </View>
                        </View>
                    </ImageBackground>
                </View>
            </LinearGradinet>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        position: "relative",
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: "center"
    },
    title: {
        fontSize: pTd(18),
        color: "#fff",
        textAlign: "center",
        marginTop: 20
    },
    bottom: {
        justifyContent: "center",
        width: "100%",
        flexDirection: "row",
        position: "absolute",
        bottom: 10
    },
    bottom_bgc: {
        height: pTd(448),
        width: pTd(345),
        position: "relative"
    },
    bottom_one: {
        width: "100%",
        height: pTd(114),
        paddingLeft: pTd(35),
        paddingRight: pTd(35),
        justifyContent: "center"
    },
    bottom_text_title: {
        fontSize: pTd(13),
        color: "#264285",
    },
    bottom_text_text: {
        fontSize: pTd(12),
        color: "#7E7E7E",
    },
    bottom_two: {
        width: "100%",
        height: pTd(108),
        paddingLeft: pTd(35),
        paddingRight: pTd(35),
        justifyContent: "center"
    },
    bottom_three: {
        width: "100%",
        height: pTd(222),
        paddingLeft: pTd(35),
        paddingRight: pTd(35),
    },
    button: {
        width: "100%",
        height: pTd(44),
        backgroundColor: "#5662EA",
        borderRadius: 5,
        marginTop: pTd(60)
    }
})

export default CreatePrompt